<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
<!--    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>-->
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <script src="/layer/layer.js"></script>
    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }

    </style>
    <script type="text/javascript">
     $(function () {
		$('#newNav').click(function(){
				window.location.href="add.html";
		 });
    });

    function checkall(){
			var alls=document.getElementsByName("check");
			var ch=document.getElementById("checkall");
			if(ch.checked){
				for(var i=0;i<alls.length;i++){
					alls[i].checked=true;	
				}	
			}else{
				for(var i=0;i<alls.length;i++){
					alls[i].checked=false;	
				}	
			}
		}
		function delAll(){
			var alls=document.getElementsByName("check");
			var ids=new Array();
			for(var i=0;i<alls.length;i++){
				if(alls[i].checked){
					ids.push(alls[i].value);
				}		
			}
			if(ids.length>0){
                layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
                    //发起异步请求
                    $.ajax({
                        type: "POST",
                        url: "/menu/", //RESTful风格的API定义
                        data: {"_method":"DELETE","ids":ids},
                        success: function (vo) {
                            if(vo.code==200){
                                layer.msg("删除成功!");
                                loadData();
                            }else{
                                layer.msg(vo.msg);
                            }
                        }
                    });
                    layer.close(index);
                });
			}else{
                layer.msg("请选中要删除的项!");
			}
		}
    </script>
</head>
<body>
<form id="myForm" class="form-inline definewidth m20" action="index.html" method="get">
    资源(菜单)名称：
    <input type="text" name="menuName" id="username"class="abc input-default" placeholder="" value="">&nbsp;&nbsp;
    <button type="button" class="btn btn-primary" onclick="loadData()">查询</button>
    <button style="margin-left: 10px" type="reset" class="btn btn-primary" >重置</button>
</form>
<table class="table table-bordered table-hover definewidth m10">
    <thead>
    <tr>
    	<th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
        <th>资源名称</th>
        <th>路径Url</th>
        <th>是否有效</th>
        <th  width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="tBody">

    </tbody>

</table>
<table class="table table-bordered table-hover definewidth m10" >
  	<tr><th colspan="5">
        <div class="inline pull-right page" id="pagination">
        <span id="total"></span>条记录&nbsp;第<span id="pageNum"></span>页/共<span id="pages"></span>页
            <input id="jumpPage" type="text" style="width: 25px;margin-bottom: 2px;margin-right: 2px">
            <button class="btn-success" id="jumpBtn" onclick="jump()">跳转</button>
        <a href='#' id="firstPage">首页</a>
        <a href='#' id="prePage">上一页</a>
        <a href='#' id="nextPage">下一页</a>
        <span id="navigatepageNums" ><a href='#'>1</a></span>
        <a id="nextFivePage" href='#' >下5页</a>
        <a  href='#' id="lastPage">尾页</a>

        每页显示:<input type="text" id="pageSize" value="" name="pageSize" style="width: 25px;margin-bottom: 2px;margin-right: 2px" />条
                <button class="btn-info" onclick="loadData()">go</button>

           </div>
        <div>
            <button type="button" class="btn btn-success" id="newNav">添加资源</button>&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中</button>
        </div></th></tr>
  </table>
</body>
</html>
<script>
    let pageNum=1;
    let pageSize=5;
    let pages=0;
    $(function () {
        readUrl();
        loadData();
        $("div[id='pagination'] a").click(function(){
            if(($(this).attr("class"))=='myDisabled')
                return;
             pageNum=$(this).attr("name");
           // $("input[name='pageNum']").val(num);
            loadData();
        });
    });
    function loadData(){
        //alert($("#myForm").serialize())
        //pageNum = $("#pageNum").html();
        pageSize = $("#pageSize").val();
        $.ajax({
            type: "GET",
            url: "/menu/list",
            data: $("#myForm").serialize()+"&pageNum="+pageNum+"&pageSize="+pageSize,//主要是分页和多条件参数数据
            dataType: "json",
            success: function (vo) {
                //alert( "Data Saved: " + vo );
                let list = vo.pageInfo.list;
                let pageInfo=vo.pageInfo;
                let total=pageInfo.total;
                pages=pageInfo.pages;
                pageNum=pageInfo.pageNum;
                pageSize=pageInfo.pageSize;
                let str = "";
                for (let i = 0; i < list.length; i++) {
                    let obj = list[i];
                    let menuId=obj.menuId;
                    let menuName=obj.menuName;
                    let menuUrl = obj.menuUrl == null ? '' : obj.menuUrl;
                    let menuState = obj.menuState == 0 ? '已启用' : '已禁用';
                    str+=" <tr>\n" +
                        "         \t<td style=\"vertical-align:middle;\"><input type=\"checkbox\" name=\"check\" value=\""+menuId+"\"></td>\n" +
                        "            <td>"+menuName+"</td>\n" +
                        "            <td>"+menuUrl+"</td>\n" +
                        "            <td>"+menuState+"</td>\n" +
                        "            <td>\n" +
                        "                <a href=\"javascript:update("+menuId+")\">编辑</a>&nbsp;&nbsp;&nbsp;<a href=\"#\" onclick='deleteMenu("+menuId+")' >删除</a> \n" +
                        "            </td>\n" +
                        "        </tr>";
                }
                $("#tBody").html(str);
                fillPageData(pageInfo);
            }
        });
    }
    function deleteMenu(menuId) {

        layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
            //发起异步请求
           $.ajax({
                type: "POST",
                url: "/menu/" + menuId, //RESTful风格的API定义
                data: "_method=DELETE",
                success: function (vo) {
                    if(vo.code==200){
                        layer.msg("删除成功!");
                        loadData();
                    }else{
                        layer.msg(vo.msg);
                    }
                }
            });
           layer.close(index);
        });

    }
    function update(menuId) {
        let pageNum=$("#pageNum").html();
        let pageSize=$("#pageSize").val();
        window.location.href="/Resource/edit.html?menuId="+menuId+"&pageNum="+pageNum+"&pageSize="+pageSize;
    }
    //填充分页数据
    function fillPageData(pageInfo) {
        //填充信息
        $("#total").html(pageInfo.total);
        $("#pages").html(pageInfo.pages);
        $("#pageNum").html(pageInfo.pageNum);
        $("#pageSize").val(pageInfo.pageSize);
        //设置按钮的属性值和样式
        $("#firstPage").attr("name",1);
        $("#prePage").attr("name",pageInfo.prePage);
        $("#nextPage").attr("name",pageInfo.nextPage);
        $("#lastPage").attr("name",pageInfo.pages);

        $("#firstPage").removeClass("myDisabled");
        $("#prePage").removeClass("myDisabled");
        $("#nextPage").removeClass("myDisabled");
        $("#lastPage").removeClass("myDisabled");
        $("#nextFivePage").removeClass("myDisabled");
        if(pageInfo.isFirstPage){//如果是第一页：上一页和首页禁用
            $("#firstPage").addClass("myDisabled");
            $("#prePage").addClass("myDisabled");
        }
        if(pageInfo.isLastPage){//如果已经是最后一页：下一页和末页禁用
            $("#nextPage").addClass("myDisabled");
            $("#lastPage").addClass("myDisabled");
        }
        let list=pageInfo.navigatepageNums;
        let str = "";
        let pageFalg;
        for (let i = 0; i < list.length; i++) {
           let strNum="page"+list[i];
            str += "<a id='"+strNum+"' href='#' onclick='loadData1("+list[i]+")'>"+list[i]+"</a>";
           // alert(pageNum);
            if(pageNum==list[i]){
                pageFalg=strNum;
            }
        }
        if(pageNum+5<=pages){
            str += "……";
            $("#nextFivePage").attr("name",pageNum+5);
           // $("#nextFivePage").removeClass("myDisabled");
        }else {
            $("#nextFivePage").attr("name",pages);
            //$("#nextFivePage").addClass("myDisabled");
        }
        if(pageNum==pages){
            $("#nextFivePage").addClass("myDisabled");
        }
        $("#navigatepageNums").html(str);
        $("#"+ pageFalg).css("color","#dd1144")
    }

    function loadData1(num) {
        pageNum=num;
        loadData();
    }

    function jump() {
    let num=$("#jumpPage").val();
        loadData1(num);
    }
    function readUrl() {
        let url = document.location.toString();
        let pageNum1 = url.GetValue("pageNum");
        let pageSize1 = url.GetValue("pageSize");
        if (pageNum1 != null) {
            pageNum = pageNum1;
        }
        if (pageSize1 != null) {
            $("#pageSize").val(pageSize1);
        }
    }
    String.prototype.GetValue = function (para) {
        let reg = new RegExp("(^|&)" + para + "=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?") + 1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>